<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>再搜索用户注册</title>
  <link href="<%=path%>/static/css/all.css?jeej345we3" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="<%=path%>/static/js/layui/css/layui.css">
  <!--[if IE]>
  <script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
  </script>
  <![endif]-->
</head>
<body>
<header>
  <div id="topnav">
    <div class="topnav">
      <ul>
        <li><a href="<%=path%>/web/garbage/index" title="">首页</a></li>
        <li><a href="#" title="">关于我们</a></li>
        <li><a href="graphers.html" title="">开发团队</a></li>
      </ul>
      <ol>
        <li><a href="#" title="">文章</a></li>
        <li><a href="#" title="">问答</a></li>
        <li><a href="<%=path%>/web/userinfo/login">登录</a></li>
      </ol>
    </div>
  </div>
</header>
<section>
<div class="wrap">
    <div id="register">
      <div class="logo"><img src="<%=path%>/static/images/registerlogo.png" width="300" height="50" alt="分类搜索"></div>
      <h1>用户注册<span><a href="javascript:void(0);" id="phone">手机注册</a></span><span><a href="javascript:void(0);" id="email">邮箱注册</a></span></h1>
      <form action="<%=path%>/web/userinfo/emailRegister" method="post" id="checkEmail">
      <div id="respont" class="email-register">
        <dl>
          <dt>邮箱注册</dt>
          <dd class="validate">
            <input name="email" type="email" class="tel" required="required" id="input-email">
              <input class="telvalidate" type="button" name="email" id="check-email" data-count="60" value="申请验证">
          </dd>
        </dl>
        <dl>
          <dt>验证码</dt>
          <dd>
            <input id="email-code" type="text" required="required">
          </dd>
        </dl>
        <dl>
          <dt>密码</dt>
          <dd>
            <input name="password" id="password" type="password"  maxlength="16" required="required" aria-label="输入包含数字、大、小写字母8位以上密码" placeholder="输入包含数字、大、小写字母8位以上密码" >
          </dd>
        </dl>
        <dl>
          <dt>重复密码</dt>
          <dd>
            <input id="rePassword" type="password" required="required">
          </dd>
        </dl>
        <div class="submit">
          <input type="button" id="sub1" value="提交">
          <input type="reset" value="重置">
        </div>
      </div>
      </form>
      <form action="<%=path%>/web/userinfo/phoneRegister" method="post" id="checkPhone">
      <div id="respont" class="phone-register">
        <dl>
          <dt>手机注册</dt>
          <dd class="validate">
            <input name="phoneNumber" type="tel" class="tel" required="required" id="phoneNumber">
            <input class="telvalidate" type="button" name="phoneNumber" data-count="60" id="check-phone" value="申请验证">
          </dd>
        </dl>
        <dl>
          <dt>验证码</dt>
          <dd>
            <input id="phone-code" type="text" required="required">
          </dd>
        </dl>
        <dl>
          <dt>密码</dt>
          <dd>
            <input name="password" type="password" id="phone-password" maxlength="16" aria-label="输入包含数字、大、小写字母8位以上密码" placeholder="输入包含数字、大、小写字母8位以上密码" required="required">
          </dd>
        </dl>
        <dl>
          <dt>重复密码</dt>
          <dd>
            <input type="password" id="rePhonePassword"/>
          </dd>
        </dl>
        <div class="submit">
          <input type="button" id="sub2" value="提交">
          <input type="reset"  value="重置">
        </div>
      </div>
      </form>
    </div>
  </div>
</div>
</section>
<footer>
  <div id="footer">
    <div id="footernav"> <a href="#">返回顶部</a> <span>|</span> <a href="#">联系方式</a> <span>|</span> <a href="#">网站地图</a> <span>|</span> <a href="#">版权说明</a> </div>
    <div id="copyright">
      <p>copright qingsoft2013 web设计 <a href="HTTP://www.songshuo.com" target="_blank">宋硕设计网站设计工作室</a></p>
    </div>
  </div>
</footer>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/layui/layui.all.js"></script>
<script>
    var code ="";
   $(function () {
     $("#phone").click(function () {//点击显示手机注册
        $(".phone-register").css("display","block")
        $(".email-register").css("display","none")
     })
     $("#email").click(function () {//点击显示邮箱注册
       $(".phone-register").css("display","none")
       $(".email-register").css("display","block")
     })
      //邮箱验证
     $("#check-email").click(function () {
         var email = $("#input-email").val();
         var regExp = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
         if(regExp.test(email)) {
             $.get("<%=path%>/web/userinfo/checkEmail",
                 {email:email},
                    function (data) {
                    if(data=="1") {
                        layer.msg("该邮箱已被注册",{icon:5})
                        return;
                    }
                    else {
                        getCode()
                    }
                    })
             }
        else{
                layer.msg("请输入正确的邮箱",{icon:5})
            }
        })

   //手机验证
   $("#check-phone").click(function () {
     var regExp = /^[1]([3-9])[0-9]{9}$/;
     var phoneNumber = $("#phoneNumber").val();
     if(regExp.test(phoneNumber)){
     $.get("<%=path%>/web/userinfo/checkPhone",
             {phoneNumber:phoneNumber},
             function (data) {
               if(data=="1") {
                 layer.msg("该手机已被注册",{icon:5})
                 return;
               }
               else {
                 getPhoneCode()
               }
             })
   }
     else {
       layer.msg("请输入正确的手机号",{icon:5})
     }
   })
   });
    //发送手机验证码
   function getPhoneCode(){
     var phoneNumber = $("#phoneNumber").val();
     $.get("<%=path%>/web/userinfo/sendPhoneCode",
             {phoneNumber:phoneNumber},
             function(data){
               code = data;
             })
     $("#check-phone").prop("disabled", true);
     var count;
     var settime;

     function countdown() {
       count = parseInt($("#check-phone").data("count"));
       count = count - 1;
       $("#check-phone").val(count + "秒后获取");
       $("#check-phone").data("count", count);
       settime = setTimeout(countdown, 1000);

       if (count == 0) {
         clearTimeout(settime);
         $("#check-phone").val("重新获取");
         $("#check-phone").data("count", "60");
         $("#check-phone").prop("disabled", false);
       }
     }
     countdown();
   }

    //邮箱发送邮件
   function getCode(){
       var email = $("#input-email").val();
       $.get("<%=path%>/web/userinfo/sendEmailCode",
               {email: email},
               function (data) {
                 code = data;
               })
       $("#check-email").prop("disabled", true);
       var count;
       var settime;

       function countdown() {
         count = parseInt($("#check-email").data("count"));
         count = count - 1;
         $("#check-email").val(count + "秒后获取");
         $("#check-email").data("count", count);
         settime = setTimeout(countdown, 1000);

         if (count == 0) {
           clearTimeout(settime);
           $("#check-email").val("重新获取");
           $("#check-email").data("count", "60");
           $("#check-email").prop("disabled", false);
         }
       }
       countdown();
   }

   //邮箱注册表单提交
    $(function () {
      $("#sub1").click(function () {
        //获取输入的验证码
        var emailCode = $("#email-code").val();
        //判断验证码是否正确
        if(emailCode!=code){
          layer.msg("验证码不正确",{icon: 5})
          return;
        }
        //获取输入的密码
        var regExp = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)\S{8,16}$/;
        var password = $("#password").val();
        //判断输入的密码是否符合正则
        if(!regExp.test(password)){
          layer.msg("密码长度不低于8位，至少含有一个数字和一个字母",{icon: 5})
          return;
        }
        //判断两次输入的密码是否一致
        var rePassword = $("#rePassword").val();
        if (password != rePassword) {
          layer.msg("两次密码不一致，请重新输入", {icon: 5});
          return;
        }
        //判断完成邮箱注册表单提交
        $("#checkEmail").submit();
      });
      //手机注册表单提交
      $("#sub2").click(function () {
        //手机注册验证码判断
        var phoneCode = $("#phone-code").val();
        if(phoneCode!=code){
          layer.msg("验证码不正确",{icon: 5})
          return;
        }
        //手机注册密码判断
        var password = $("#phone-password").val();
        var regExp = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)\S{8,16}$/;
        if(!regExp.test(password)){
          layer.msg("密码长度不低于8位，至少含有一个数字和一个字母",{icon: 5})
          return;
        }
        //两次密码判断
        var rePassword = $("#rePhonePassword").val();
        if (password != rePassword) {
          layer.msg("两次密码不一致，请重新输入", {icon: 5})
          return;
        }
        //判断完成表单提交
        $("#checkPhone").submit();
      })

    });

</script>
</body>
</html>
